<template>
  <div id="z">
    <van-nav-bar left-text="会员权益" left-arrow @click-left="onClickLeft" />
    <div id="r1">
      <h3>V1</h3>
      <div id="r1-1">
        <van-steps :active="active" active-color="#FF9933">
          <van-step>0</van-step>
          <van-step>100</van-step>
          <van-step>500</van-step>
          <van-step>1000</van-step>
          <van-step>2000</van-step>
          <van-step>5000</van-step>
        </van-steps>
        <div id="r1-2">
          <span class="v1">V1</span>
          <span class="v2">V2</span>
          <span class="v3">V3</span>
          <span class="v4">V4</span>
          <span class="v5">V5</span>
          <span class="v6">V6</span>
        </div>
        <p>当前成长值0，距离下一等级只差100成长值</p>
      </div>
    </div>
    <div id="r2">
      <img src="../assets/21.png" alt="" />
      <h4>V1会员特权</h4>
      <span>当前等级</span>
    </div>
    <div id="r3">
      <span>开卡特权</span>
      <h4>奈雪的茶</h4>
      <van-grid>
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youhuiquan2"></use>
          </svg>
           <p>5元外卖券</p>
        </van-grid-item>
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youhuiquan"></use>
          </svg>
           <p>5元现金券</p>
        </van-grid-item>
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-beizi101"></use>
          </svg>
           <p>买茶送包券</p>
        </van-grid-item>   
      </van-grid>
    </div>
    <div id="r3">
      <span>生日特权</span>
      <h4>奈雪的茶</h4>
      <van-grid>
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-beizi201"></use>
          </svg>
           <p>生日免费券</p>
        </van-grid-item>   
      </van-grid>
    </div>
    <div id="r3">
      <span>更多权益</span>
      <h4></h4>
      <van-grid>
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youhuiquan1"></use>
          </svg>
           <p>活动优先报名权</p>
        </van-grid-item>   
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youhuiquan3"></use>
          </svg>
           <p>新品品鉴会</p>
        </van-grid-item>   
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-beizi-"></use>
          </svg>
           <p>线下体验活动</p>
        </van-grid-item>   
        <van-grid-item>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-ticket_coupon"></use>
          </svg>
           <p>不定期新品体验券</p>
        </van-grid-item>   
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("me");
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#z {
  min-height: 100vh;
  background-color: rgb(243, 241, 241);
  padding: 0 0 3vh;
}
::v-deep .van-nav-bar__text {
  color: black;
  font-size: 15px;
  margin: 0.5vh 0 0 2vh;
}
::v-deep .van-icon-arrow-left:before {
  color: black;
}
#r1 {
  background-color: white;
  padding: 3vh 4vh 0.5vh;
}
#r1 h3 {
  margin-left: -50vh;
}
::v-deep.van-step--horizontal .van-step__title {
  margin-left: -7vh;
}
::v-deep.van-step--horizontal:last-child .van-step__title {
  margin-left: 10vh;
}
#r1-1 {
  margin: 2vh;
}
#r1-2 {
  font-size: 12px;
}
.v1 {
  margin-right: 6vh;
}
.v2 {
  margin-right: 7vh;
}
.v3 {
  margin-right: 6vh;
}
.v4 {
  margin-right: 7vh;
}
.v5 {
  margin-right: 6vh;
}
#r1 p {
  font-size: 12px;
  margin-top: 2vh;
  color: gray;
}
#r2 {
  background-color: white;
  margin: 2vh 0;
  padding: 2vh;
  position: relative;
}
#r2 img {
  width: 80%;
  border-radius: 10px;
  margin-bottom: 2vh;
  overflow: hidden;
}
#r2 span {
  background-color: rgba(32, 32, 32, 0.4);
  color: white;
  font-size: 14px;
  padding: 1vh;
  position: absolute;
  top: 2vh;
  right: 7vh;
}
#r3{
  background-color: white;
  margin: 0 2vh 2vh;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
#r3 span{
  background-color: #a7d500;
  color: white;
  font-size: 14px;
  padding: 0.5vh 1vh;
  position: absolute;
  left: 0vh;
  box-shadow: 2px 2px 3px gainsboro;
}
#r3 h4{
  margin-top: 6vh;
  margin-left: -38vh;
}
.icon {
  height: 4vh;
  width: 4vh;
}
#r3 p{
  font-size: 12px;
  margin-top: 1vh;
}
</style>